<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>商品列表</title>
		<script src="js/mui.min.js"></script>
		<script src="js/template-web.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />

	</head>
	<body class="mui-ios mui-ios-13 mui-ios-13-2 mui-ios-13-2-3">
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">商品列表</h1>
		</header>
		<div class="mui-content">
			<!-- 商品列表 -->
			<ul id="goodLists" class="mui-table-view">
			  <script type="text/html" id="listLi">
				{{ each  rows  list index }}
				<li  data-id="{{list.id}}" class="mui-table-view-cell mui-media">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-blue">编辑</a>
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="http://localhost:8000/{{ list.goods_img }}">
							<div class="mui-media-body">
								{{ list.goods_name}}
								<p class="mui-ellipsis">商品价格:{{ list.goods_price }} ——商品数量:{{list.goods_num}}</p>
							</div>
						</a>
					</div>
				</li>
				{{ /each }}
				</script>
			</ul>
		</div>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			// 获取商品列表
			mui.ajax('http://localhost:8000/api/goods/', {
				dataType: 'json', //服务器返回json格式数据
				type: 'get', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(data) {
					if (data.code == 0) {
						mui.toast(data.message);
			    	var html = template('listLi', data.result);
						// console.log(html)
						document.getElementById('goodLists').innerHTML = html;
					} else {
						mui.toast(data.message);
					}
				},
				error: function(xhr, type, errorThrown) {
					mui.toast('获取列表失败！' + type);
				}
			});
			// 删除商品信息
			
				var btnArray = ['确认', '取消'];

				//拖拽后显示操作图标，点击操作图标删除元素
				mui(".mui-slider-right").on('tap', '.mui-btn', function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					// 获取当前商品id
					console.log(li)
					mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定' + this.innerText +
						'此条信息？</h3></div>', '温馨提醒', btnArray,
						function(e) {
							// 如果e.index等于0，则删除li元素
							if (e.index == 0) {
								li.parentNode.removeChild(li);
								// 从数据库中删除数据
								mui.ajax('http://localhost:8000/api/goods/'+id+'/off', {
									dataType: 'json', //服务器返回json格式数据
									type: 'post', //HTTP请求类型
									timeout: 10000, //超时时间设置为10秒；
									success: function(data) {

									},
									error: function(xhr, type, errorThrown) {

									}
								});

							} else {
								// 否则，延迟0毫秒后关闭li元素
								setTimeout(function() {
									mui.swipeoutClose(li);
									
								}, 0);
							}
						});
				});
			
		</script>
	</body>
</html>